<template>
  <a-card :bordered="false" style="margin-bottom: 10px">
    <BaseInfo :id="personId" />
    <a-alert type="info" :showIcon="true" style="margin-top:20px;">
      <div slot="message">
        该{{sjskTypetoString()}}人员定期报告规则：<span style="color:#1890FF;">{{rules.rulesTime}}； 
        </span>共需要做 {{rules.total}}次 定期报告；已完成<span style="color:#1890FF;">{{rules.completeCount}}
        </span>次，待开始<span style="color:#1890FF;">{{rules.waitBeginCount}}</span>次
      </div>
    </a-alert>
    <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
      :dataSource="pageData" @change="onTableChange">
      
      <template slot="reportNum" slot-scope="text,record">
              <span v-if="record.reportNum">第{{ record.reportNum }}次</span>
              <span v-else>无</span>
      </template>
      <template slot="reportTime" slot-scope="text,record">
              <span>{{ record.reportStartTime }} ~ {{ record.reportEndTime }}</span>
      </template>
      <template slot="content" slot-scope="text,record">
              <span>{{ record.contentUrine }} ; {{ record.contentInterview }} ; {{ record.contentSign }}</span>
      </template>
      

      <!--操作-->
      <!-- <template slot="action" slot-scope="text, record">
        <a-button @click="onCYX(record)" type="link" style="padding: 0">催一下</a-button>
        <a-divider type="vertical" />
        <a-button @click="onDetail(record)" type="link" style="padding: 0">查看</a-button>
      </template> -->
    </z-table>

    <DetailModal ref="detailModalId" />
  </a-card>
</template>

<script>
import BaseInfo from '@/views/sjsk/modules/BaseInfo'
import DetailModal from './modules/DetailModal'
import {sjskReportData,sjskReportStatistical} from '@/api/sjsk/estimate/list/index'
export default {
  components: {
    BaseInfo, DetailModal
  },

  data() {
    return {
      reportTime:[],
      form: {
        realname: "吴小林"
      },
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '报告次数',
          dataIndex: 'reportNum',
          align: 'center',
          scopedSlots:{ customRender: 'reportNum'}
          // customRender: (text) => {
          //   return <j-ellipsis value={text} length={14} />
          // },
        },
        {
          title: '报告区间',
          dataIndex: 'reportStartTime',
          align: 'center',
          scopedSlots: { customRender: 'reportTime' },
          // customRender: (text) => {
          //   return <j-ellipsis value={text} length={20} />
          // },
        },
        {
          title: '管控情况',
          dataIndex: 'contentUrine',
          align: 'center',
          scopedSlots:{ customRender: 'content'}
        },
        {
          title: '生成时间',
          dataIndex: 'reportlTime',
          align: 'center',
        }
        // {
        //   title: '状态',
        //   dataIndex: 'labelName',
        //   align: 'center',
        //   customRender: (text) => {
        //     return <j-ellipsis value={text} length={14} />
        //   },
        // },
        // {
        //   title: '提交时间',
        //   dataIndex: 'createTime',
        //   align: 'center',
        // },
        // {
        //   title: '操作',
        //   width: 150,
        //   align: 'center',
        //   dataIndex: 'action',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {
        records: [{
          taskCode: "11111"
        }]
      },
      personId: this.$route.query.sjskid,
      rules:{}
    }
  },
  created() { },
  async mounted() {
    this.onQuery()
    this.reportRules()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    reportRules(){
      sjskReportStatistical(this.$route.query.sjskid)
        .then((res) => {
            if (res.success) {
              console.log(res);
              this.rules = res.result ? res.result : {}
              this.loading = false
            } else {
              this.loading = false
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
    },
    sjskTypetoString(){
      if(this.rules.sjskType == 1){ return '社戒'}
      else { return '社康'}
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      // console.log(this.$route.query.sjskid);
      // console.log('ppp'+this.sjskPersonId);
      sjskReportData(this.$route.query.sjskid)
        .then((res) => {
          if (res.success) {
            // console.log(res);
            this.pageData = res.result ? res.result : {}
            // this.reportTime.push(this.pageData.reportStartTime)
            // this.reportTime.push(this.pageData.reportEndTime)
            // console.log(this.pageData);
            // console.log(this.pageData.reportStartTime);
            // console.log(this.pageData.reportEndTime);
            // console.log(this.reportTime);
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onDetail(record) {
      this.$refs.detailModalId.show()
    },
    onCYX(record) {

    }
  },
}
</script>
<style lang="less" scoped>

</style>
